<template>

    <a-popover :title="fileName" >
        <div slot="content" style="text-align:center">
            <a @click="handleDown()">
                <a-icon type="cloud-download"/>
                下载
                <AkFileDown :url="url" ref="AkFileDown"/>
            </a>
        </div>
        <a-icon type="video-camera" :style="`fontSize:${imgHeight}px`" @click="handlerPreview" />
        <a-modal :title="fileName" width="80%" v-model="visible" @cancel="handleOk" @ok="handleOk">
            <div  v-if="!exported" >
                <p style="text-align:center">正在下载...</p>
                 <a-progress :percent="exportPercent" status="active" />
            </div>
            <div  v-if="exported">
                <video
                id="myVideo"
                class="video-js"
                style="width:100%;height: 600px"
                >
                <source
                    :src="fileLocalUrl"
                    type="video/mp4">
                </video>
            </div>
            
        </a-modal>
    </a-popover> 
    
</template>
<script>
import video from 'video.js';
import 'video.js/dist/video-js.min.css'
import AkFileDown from './AkFileDown';
import {downFile} from '../../../api/manage';
import {isSameDomain} from '../../../utils/validate'
export default {
    name:"AkVideoPreview",
    describe:"视频预览",
    components:{AkFileDown},
    props:{
        url:{
            type:String,
            required:true
        },
        fileName:{
            type:String,
            required:false,
            default:''
        },
        imgHeight:{
            type:Number,
            required:false,
            default:50
        }
    },
    data(){
        return {
            exporting:false,
            exportPercent:0,
            exported:false,
            visible:false,
            fileLocalUrl:'',
            videoInited:false,
            myPlayer:{},
        }
    },
    methods:{
        handleDown(){
            this.$refs.AkFileDown.down();
        },
        initVideo(){
            this.$nextTick(()=>{
                if(this.videoInited){
                    return;
                }
                this.videoInited = true;
                this.myPlayer = video('myVideo', {
                    //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                    controls: true,
                    //自动播放属性,muted:静音播放
                    autoplay: "muted",
                    //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                    preload: "auto",
                    // //设置视频播放器的显示宽度（以像素为单位）
                    // width: "800px",
                    // //设置视频播放器的显示高度（以像素为单位）
                    // height: "400px"
                });
            });
            
        },
        handlerPreview(){
            if(!this.exported){
                if(isSameDomain(window.location.href, this.url)){
                    this.fileLocalUrl = this.url;
                    this.exported = true;
                    this.initVideo();
                    return;
                }
                this.exporting=true;
                this.exportPercent=0;
                downFile(this.url, null, (event)=>{
                    if(event.total){
                        this.exportPercent = parseFloat((event.loaded/event.total*100).toFixed(1));
                    }
                }).then(res=>{
                    this.fileLocalUrl = URL.createObjectURL(res.data);
                    this.exported = true;
                    this.exporting=false;
                    this.exportPercent=100;
                    this.initVideo();
                }).catch(e=>{
                    this.exporting=false;
                    this.exportPercent=0;
                    console.warn(e);
                    this.$message.warn("文件下载网络错误");
                });
            }
            this.visible = true;
        },
        handleOk(){
            this.visible = false;
            this.myPlayer.pause();
        }

    }

}
</script>